<template>
    <div class="app-container">

      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户名">
            <el-input v-model="formInline.user" placeholder="用户名" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit" >查询</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addUser">新增</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="eadiUser">修改</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="onDel">删除</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div>

        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%; margin-bottom: 20px;">
          <el-table-column
            property="indexty"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            property="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            label="角色">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.avatar === '0' ? 'primary' : 'success'"
                disable-transitions>{{scope.row.avatar | capitalize}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            property="email"
            label="邮箱">
          </el-table-column>
          <el-table-column
            property="reg_date"
            label="注册时间">
          </el-table-column>
          <el-table-column
            property="expire_time"
            label="最近登录">
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="currentChange"
          :total="total">
        </el-pagination>

      </div>


      <add-user :dialogObjData="dialogData" ref="userDialog" @childByValue="childByValue"></add-user>


    </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import Component from 'vue-class-component'
  import {selectuser, deleteuser, seachUserName, userAvatar} from '../../api/data.js'
  import {isEmptyValue} from '../../utils/validate.js'
  import {anCopy, format} from '../../utils/anFun.ts'
  import addUser from './components/addUser.vue'

  interface diaVal {
    til:string;
    RowData:object;
  }
  interface secfrom {
    user:string;
  }

  @Component({
    components:{
      addUser
    },
    filters: {
      capitalize: function (value:string) {
        let nd = parseInt(value)
        return userAvatar(nd)
      }
    }
  })
  export default class syssetuser extends Vue {

    //data数据
    formInline:secfrom = {
      user: '',
    };
    tableData:Array<number> = [];
    currentRow:any = {};
    total:number = 0; //数据总条数
    num:number = 1; //当前第几页
    pagesize:number = 10; //每页显示条数
    dialogData:diaVal={
      til:'',
      RowData:{},
    };

    //生命周期函数
    mounted(){

      this.anLound();
    };

    //函数方法
    anLound(){
      let p:number = this.pagesize;
      let n:number = (this.num -1)*p;
      let nd = {
        count:n,
        pagesize:p,
        name:this.formInline.user,
      };
      selectuser(nd).then((res:any)=>{
        this.total = res.data.total;
        let nd = res.data.users;
        for(let i = 0; i<nd.length; i++){
          nd[i].indexty = format(i,this.num);
        }
        this.tableData = nd;
        this.formInline.user = '';
      })
    };
    //选中行
    handleCurrentChange(val:any){
      if(!isEmptyValue(val)){
        let nd = val;
        nd.id = parseInt(val.id);
        this.currentRow = nd;
      }
    };
    //查询
    onSubmit(){
      let nd = this.formInline.user;
      if(!isEmptyValue(nd)){
        this.anLound();
      }
    };
    //新增
    addUser(){

      this.dialogData.til = '新增用户';
      this.dialogData.RowData = {};
      let el:any = this.$refs.userDialog;
      el.openDia()

    };
    //修改
    eadiUser(){
      this.dialogData.til = '修改用户';
      if(isEmptyValue(this.currentRow)){
        return this.$message.error('请选择一条数据修改！');
      }
      this.dialogData.RowData = anCopy(this.currentRow);
      let el:any = this.$refs.userDialog;
      el.openDia()
    };
    //删除
    onDel(){
      let nd = this.currentRow;
      if(isEmptyValue(nd)){
        return this.$message.error('请选择一条数据删除！');
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = nd.id;
        deleteuser(id).then((res:any)=>{
          this.$message.success('删除成功！');
          this.anLound();
        })
      })
    };
    childByValue(n:number){
      if(n===1){
        this.anLound();
      }
    };
    //分页
    currentChange(val:number){
      this.num = val;
      this.anLound();
    };



  }

</script>

<style scoped>

</style>
